<template>
	<view>
		<!-- <u-image mode="widthFix" src="@/static/swiper/assets-mian.png"></u-image> -->
		<view class="padding32">
			<u-cell-group>
				<u-cell-item center :value="commercialCar.carModel" :value-style="{'color':'#666'}" @click="clickCar"
					:arrow="true" title="车辆型号">
				</u-cell-item>
				<u-cell-item center :value="commercialCar.addresss" :value-style="{'color':'#666'}"
					@click="cityShow = true" :arrow="true" title="所在地区"></u-cell-item>
				<u-cell-item center :value="commercialCar.date" :value-style="{'color':'#666'}" @click="clickDate"
					:arrow="true" title="上牌时间"></u-cell-item>
				<u-cell-item center value="" :arrow="false" title="行驶里程">
					<u-input slot="right-icon" v-model="commercialCar.mileage" input-align="right" type="number"
						placeholder="请输入" />
					<text style="margin-left: 8px;" slot="right-icon">万公里</text>
				</u-cell-item>
				<u-cell-item center :value="commercialCar.oldNew" :value-style="{'color':'#666'}" @click="oldNewShow=true"
					:arrow="true" title="轮胎新旧程度"></u-cell-item>
				<u-cell-item center value="" :arrow="false" title="新车购车价">
					<u-input slot="right-icon" v-model="commercialCar.buyCarPrice" input-align="right" type="number"
						placeholder="请输入" />
					<text style="margin-left: 8px;" slot="right-icon">万元</text>
				</u-cell-item>
			</u-cell-group>
		</view>
		<view class="page">
			<u-button type="primary" @click="quickValuationStart">开始估值</u-button>
		</view>
		<!-- 上牌时间 -->
		<u-picker mode="time" :defaultTime="defaultTime" v-model="showDate" :params="params" @confirm="confirmDate">
		</u-picker>
		<!-- 所在地区 -->
		<city-select v-model="cityShow" @city-change="cityChange"></city-select>
		<!-- 新旧情况 -->
		<u-picker v-model="oldNewShow" mode="selector" :default-selector="[0]" :range="selectorObj1" range-key="name" @confirm="confirmOldNew"></u-picker>
	</view>
</template>

<script>
	import citySelect from "../../components/citySelect/u-city-select.vue"
	import app from "../../App.vue"
	export default {
		components: {
			citySelect,
		},
		data() {
			return {
				oldNewShow:false,
				cityShow:false,
				commercialCar: {
					carModel: '请选择型号',
					addresss: '请选择地区',
					date: '请选择上牌时间',
					mileage: '', //行驶里程
					oldNew: '请选择', //新旧程度
					buyCarPrice: '', //购车价
				},
				defaultTime: '',
				params: {
					year: true,
					month: true,
				},
				showDate:false,
				selectorObj1:[
					{
						name:'九成新及以上',
						code:'1'
					},
					{
						name:'七成新',
						code:'2'
					},
					{
						name:'五成新',
						code:'3'
					},
					{
						name:'该换轮胎了',
						code:'4'
					}
				],
			}
		},
		onShow() {
			if (app.globalData.carTypeName) {
				this.commercialCar.carModel = app.globalData.carTypeName
			} else {
				this.commercialCar.carModel = '请选择型号'
			}
		},
		methods: {
			// 选择地区
			cityChange(data) {
				if (data.city.label === '市辖区') {
					this.commercialCar.addresss = data.province.label + '-' + data.area.label
				} else {
					this.commercialCar.addresss = data.province.label + '-' + data.city.label + '-' + data.area.label
				}
			},
			// 选择车型
			clickCar() {
				uni.navigateTo({
					url: "../selectCar/selectCar"
				})
			},
			// 选择日期
			clickDate() {
				let date = new Date();
				this.defaultTime = date.getFullYear() + '-' + (date.getMonth() + 1);
				this.showDate = true;
			},
			// 日期确定
			confirmDate(date) {
				this.commercialCar.date = date.year + '-' + date.month
			},
			// 开始估值
			quickValuationStart(){
				uni.navigateTo({
					url:"../assessment/mianfeiReportDetail"
				})
			},
			// 轮胎新旧程度确认
			confirmOldNew(data){
				this.commercialCar.oldNew = this.selectorObj1[data[0]].name
			}
		}
	}
</script>

<style scoped lang="scss">
	.padding32{
		margin: 32rpx;
		border-radius: 20rpx;
		overflow: hidden;
	}
</style>
